<template>
	<view class="zy-drag-view"
		:class="{'horizontal': isHorizontal, 'vertical': isVertical}">
		<view class="zy-drag-view-con"
			:class="{'horizontal': isHorizontal, 'vertical': isVertical}">
			<template v-if="(dragPosition === 'right' || dragPosition === 'bottom')">
				<view class="zy-drag-view-inner"
					:style="{
						width: isVertical ? currentWidth + 'px' : '',
						height: isHorizontal ? currentWidth + 'px' : maxConHeight + 'px',
					}">
					<view :id="cid + '-AbsCon'" class="zy-drag-view-abs-con">
						<slot></slot>
					</view>
				</view>
			</template>
			
			<view class="zy-drag-view-drag"
				:style="{
					width: isHorizontal ? '100%' : '',
					height: isVertical ? '100%' : '',
				}"
				:class="{
					left: dragPosition === 'left',
					right: dragPosition === 'right',
					top: dragPosition === 'top',
					bottom: dragPosition === 'bottom',
				}"
				:data-cid="cid"
				:data-option="cOpts"
				:prop="cOpts" 
				:change:prop="wxsModule.init"
				@touchstart="wxsModule.touchStart"
				@touchmove="wxsModule.touchMove"
				@touchend="wxsModule.touchEnd">
				<slot name="drag">
					<view class="drag-block-con"
						:style="{
							height: isHorizontal ? dragBlockConHeight : '100%',
							width: isVertical ? dragBlockConHeight : '100%',
						}">
						<view class="drag-block"
							:style="{
								height: isHorizontal ? dragBlockWidth : dragBlockHeight,
								width: isHorizontal ? dragBlockHeight : dragBlockWidth,
								background: dragBlockBackground,
							}"></view>
					</view>
				</slot>
			</view>
			
			<template v-if="(dragPosition === 'left' || dragPosition === 'top')">
				<view class="zy-drag-view-inner"
					:style="{
						width: isVertical ? currentWidth + 'px' : '',
						height: isHorizontal ? currentWidth + 'px' : maxConHeight + 'px',
					}">
					<view :id="cid + '-AbsCon'" class="zy-drag-view-abs-con">
						<slot></slot>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script module="wxsModule" lang="wxs" src="./zy-drag-view.wxs"></script>
<script>
	//生成随机Id
	function randomId(prefix) {
		//Id长度
		const len = 10;
		const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
		const nums = '1234567890';

		var id = '';

		//字母开头
		for (let i = 0; i < len - 4; i++) {
			id += chars.charAt(Math.floor(Math.random() * chars.length));
		}
		//数字结尾
		for (let i = 0; i < 4; i++) {
			id += nums.charAt(Math.floor(Math.random() * nums.length));
		}

		return (prefix ? prefix + id : id);
	}
	
	export default {
		name:"zy-drag-view",
		props: {
			/**
			 * 拖拽块位置
			 */
			dragPosition: {
				type: String,
				default: 'bottom'
			},
			/**
			 * 拖拽块容器高度/宽度
			 */
			dragBlockConHeight: {
				type: String,
				default: '50rpx'
			},
			/**
			 * 拖拽块高度(长的一边)
			 */
			dragBlockHeight: {
				type: String,
				default: '120rpx'
			},
			/**
			 * 拖拽块宽度(短的一边)
			 */
			dragBlockWidth: {
				type: String,
				default: '12rpx'
			},
			/**
			 * 拖拽块背景色
			 */
			dragBlockBackground: {
				type: String,
				default: 'rgba(0, 0, 0, 0.2)'
			},
			/**
			 * 是否自动打开关闭
			 */
			autoOpenClose: {
				type: Boolean,
				default: true
			},
			/**
			 * 展开/关闭阈值
			 * 支持单位(%/px/rpx)
			 */
			expandThreshold: {
				type: String,
				default: '20%'
			},
			/**
			 * 触发视图变化的对象
			 * 该对象变化时会触发容器大小适应
			 */
			changeData: {
				type: Object,
			}
		},
		data() {
			return {
				cid: randomId('zy-drag-view-'),
				useWXS: false,
				maxConWidth: 0,
				maxConHeight: 0,
				currentWidth: 0,
				startTouch: null,
				cOpts: null,
			};
		},
		computed: {
			isHorizontal() {
				return this.dragPosition === 'top' || this.dragPosition === 'bottom'
			},
			isVertical() {
				return this.dragPosition === 'left' || this.dragPosition === 'right'
			},
			maxConHW() {
				if(this.isHorizontal) {
					return this.maxConHeight
				}
				else {
					return this.maxConWidth
				}
			},
		},
		watch: {
			//如果数据内容变化重新计算大小
			changeData: {
				deep: true,
				immediate: true,
				handler() {
					//保证视图已更新
					this.$nextTick(() => {
						this.init()
					})
				}
			}
		},
		mounted() {
			// #ifdef APP || H5 || MP-WEIXIN || MP-QQ
			//支持WXS的环境开启WXS
			this.useWXS = true
			// #endif
		},
		methods: {
			init() {
				let query = uni.createSelectorQuery().in(this)
				query.select(`#${this.cid}-AbsCon`)
					.boundingClientRect((rect) => {
						console.log('acon', rect)
						this.maxConWidth = rect.width
						this.maxConHeight = rect.height
						
						let copt = {
							cid: this.cid,
							dragPosition: this.dragPosition,
							isHorizontal: this.isHorizontal,
							isVertical: this.isVertical,
							maxConWidth: this.maxConWidth,
							maxConHeight: this.maxConHeight,
							maxConHW: this.maxConHW,
							autoOpenClose: this.autoOpenClose,
							expandThreshold: this.expandThreshold,
							changeData: this.changeData,
						}
						this.cOpts = copt
					})
					.exec()
			},
			touchStart(e) {
			},
			touchMove(e) {
			},
			touchEnd(e) {
			},
			onOpen(e) {
				this.$emit('open')
			},
			onClose(e) {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss">
	.zy-drag-view {
		&.horizontal {
			.zy-drag-view-abs-con {
				width: 100%;
			}
		}
		&.vertical {
			display: inline-block;
			
			.zy-drag-view-abs-con {
				
			}
		}
	}
	.zy-drag-view-inner {
		position: relative;
		overflow: hidden;
		
		&.animate {
			transition: all .3s;
		}
	}
	.zy-drag-view-abs-con {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.zy-drag-view-drag {
		flex: 0;
	}
	.zy-drag-view-con {
		position: relative;
		display: flex;
		
		&.horizontal {
			flex-direction: column;
			justify-content: center;
		}
		&.vertical {
			flex-direction: row;
			align-items: center;
		}
		
		.drag-block-con {
			display: flex; 
			justify-content: center; 
			align-items: center;
		}
		.drag-block {
			border-radius: 99999px;
		}
	}
</style>